/* 
  Redux 概念：
    1. store    仓库
    2. reducer  管理员
*/

import React from 'react';
import { createStore } from 'redux';

const defaultState = { num: 0 };

const reducer = (state = defaultState, action) => {
  if (action.type === 'add') {
    let newState = JSON.parse(JSON.stringify(state));
    newState.num += action.value;
    return newState;
  }
  return state;
};

const store = createStore(reducer);

console.log(store);
// 打印式学习：
//    store.getState()             -  获取数据
//    store.dispatch(action)       -  用来触发修改
//    store.subscribe(listener)


class App extends React.Component {
  state = {
    // 1. 从仓库拿到的数据，解构添加到了 state 中
    ...store.getState()
  };
  addToCart = () => {
    // action 其实就是个对象 - 告诉管理员如何操作数据
    const action = {
      type: 'add',
      value: 1
    };
    // 向仓库发送 action 动作  ->  自动触发管理员的函数 reducer
    store.dispatch(action);
    // console.log('仓库现在的数据', store.getState());

    // 更新视图
    this.setState({ num: store.getState().num });
  };
  render() {
    return (
      <div className="App">
        <h1>从仓库中拿到的数据：{this.state.num}</h1>
        <button onClick={this.addToCart}>加入购物车</button>
      </div>
    );
  }
}

export default App;
